<#include "/common/commoncss.ftl">
<#include "/common/modalTip.ftl"/>
<style type="text/css">
    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
    }

    .bgc-w {
        background-color: #fff;
    }
</style>
<head>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
</head>
<body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">部门管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
                disabled="disabled">部门管理</a>
    </div>
</div>
<div class="row" style="padding-top: 15px;">
    <div class="col-md-12">
        <!--id="container"-->
        <div class="bgc-w box box-primary">
            <!--盒子头-->
            <div class="box-header">
                <h3 class="box-title">
                    <a href="deptedit?btn=0" class="label label-success" style="padding: 5px;">
                        <span class="glyphicon glyphicon-plus"></span> 新增
                    </a>
                    <span style="color: red;">${errorMsg!''}</span>
                </h3>
                <!-- <div class="box-tools">
                    <div class="input-group" style="width: 150px;">
                        <input type="text" class="form-control input-sm"
                            placeholder="查找..." />
                        <div class="input-group-btn">
                            <a class="btn btn-sm btn-default"><span
                                class="glyphicon glyphicon-search"></span></a>
                        </div>
                    </div>
                </div> -->
            </div>
            <!--盒子身体-->
<#--            <div class="box-body no-padding">-->
<#--                <div class="table-responsive">-->
<#--                    <table class="table table-hover table-striped">-->
<#--                        <tr>-->
<#--                            <th scope="col">名称</th>-->
<#--                            <th scope="col">电话</th>-->
<#--                            <th scope="col">邮箱</th>-->
<#--                            <th scope="col">地址</th>-->
<#--                            <th scope="col">操作</th>-->
<#--                        </tr>-->
<#--                        <#list depts as dept>-->
<#--                            <tr>-->
<#--                                <td><span>${dept.deptName}</span></td>-->
<#--                                <td><span>${dept.deptTel}</span></td>-->
<#--                                <td><span>${dept.email}</span></td>-->
<#--                                <td><span>${dept.deptAddr}</span></td>-->
<#--                                <td>-->
<#--                                    <a href="deptedit?dept=${dept.deptId}" class="label xiugai">-->
<#--                                        <span class="glyphicon glyphicon-edit"></span> 修改</a>-->
<#--                                    <a href="readdept?deptid=${dept.deptId}" class="label xiugai">-->
<#--                                        <span class="glyphicon glyphicon-search"></span> 人事调动-->
<#--                                    </a>-->
<#--                                    <a href="readdept?deptid=${dept.deptId}" class="label shanchu"><span-->
<#--                                                class="glyphicon glyphicon-remove"></span> 删除</a></td>-->
<#--                            </tr>-->
<#--                        </#list>-->
<#--                    </table>-->
<#--                </div>-->
<#--            </div>-->
            <table id="table" value="dept"></table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var $table = $('#table');
    $(function (){
        $table.bootstrapTable({
            url: 'deptmanageByJ',
            idField: 'deptId',
            parentIdField: 'parentId',  //父节点id
            search: true,    //定义右上方的搜索框,输入即可以开始搜索
            //在哪一列展开树形
            treeShowField: 'deptName',
            clickToSelect: true, //点击行选中
            singleSelect: true, //单选
            columns: [
                {
                    field: 'check', checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            // 设置选中
                            return {checked: true};
                        }
                    }
                },
                {field: 'deptName', title: '名称'},
                {field: 'deptTel', title: '电话'},
                {field: 'email', title: '邮箱'},
                {field: 'deptAddr', title: '地址'},
                {field: 'operate', title: '操作', align: 'center', formatter: 'operateFormatter'},
            ],
            //  bootstrap-table-treegrid.js 插件配置 -- start

            onResetView: function (data) {
                $table.treegrid({
                    initialState: 'collapsed', // 所有节点都折叠
                    // initialState: 'expanded', // 所有节点都默认展开
                    treeColumn: 1,
                    //  可以加图标样式
                    // xx
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });
                // 只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');
            },
            onCheck:function (row) {
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas,row,"deptId","parentId",true);
                // 勾选父类
                selectParentChecked(datas,row,"deptId","parentId")
                // 刷新数据
                $table.bootstrapTable('load',datas);
            },
            // -- end

    });
    });

    // 格式化按钮
    function operateFormatter(value,row,index) {
        return [
            '<a href="deptedit?btn=0&dept=' + row.deptId + '"class="label label-success" style="padding: 5px;">&nbsp;新增</a>',
            '&nbsp;<a href="deptedit?btn=1&dept=' + row.deptId + '"class="label label-success" style="padding: 5px;">&nbsp;修改</a>',
            '&nbsp;<a href="deleteDept?&dept=' + row.deptId +'&leaf='+ row.leaf+ '"class="label label-success" style="padding: 5px;">&nbsp;删除</a>',
            '&nbsp;<a href="readdept?&deptid=' + row.deptId + '"class="label label-success" style="padding: 5px;">&nbsp;人事调动</a>',
        ].join('');
    }

</script>

<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        console.log("zi",datas,'row',row,'check',checked)
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentUnchecked(datas,row,id,pid){
        console.log("fu--Uncheck",datas,'row',row,)
        let key = 0;
        for(var i in datas){
            if(datas[i].pid == row.pid && datas[i].check == true){
                key++
            }
        }
        console.log(key)
        if(key == 0 ){
            for(var i in datas){
                if(datas[i][id] == row[pid]){
                    datas[i].check=false;
                    selectParentUnchecked(datas,datas[i],id,pid);
                }
            }
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }
</script>